<div class="layui-fluid">
  <div class="layui-row">
    <form action="" method="post" class="layui-form layui-form-pane" lay-filter="example">
      <div class="layui-form-item">
        <input type="hidden" name="id" value="{$id}">
      </div>
      <div class="layui-form-item">
        <label for="type" class="layui-form-label">
          <span class="x-red">*</span>表类型
        </label>
        <div class="layui-input-inline">
          <select name="type">
            <option value="B" {if $data.type=='B' }selected{/if}>电费</option>
            <option value="C" {if $data.type=='C' }selected{/if}>水费</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="house_property_id" class="layui-form-label">
          <span class="x-red">*</span>关联房产
        </label>
        <div class="layui-input-inline">
          {if $id}
          <input type="text" id="house_property_name" name="house_property_name" value="{$data.house_property_name}"
            required="" lay-verify="required" autocomplete="off" class="layui-input" readonly
            style="background-color: #eeeeee;">
          <input type="hidden" name="house_property_id" value="{$data.house_property_id}">
          {else}
          <select name="house_property_id" lay-filter="select">
            {foreach $property as $v}
            <option value="{$v.id}" {if $v.id===$data.house_property_id}selected{/if}>{$v.name}</option>
            {/foreach}
          </select>
          <input type="hidden" name="house_property_name" value="{$data.house_property_name}">
          {/if}
        </div>
      </div>
      <div class="layui-form-item">
        <label for="house_number_id" class="layui-form-label">
          <span class="x-red">*</span>关联房号
        </label>
        <div class="layui-input-block" id="divCheck">
          {foreach $number as $v}
          <input type="checkbox" name="number[{$v.id}]" value="{$v.id}" title="{$v.name}">
          {/foreach}
        </div>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
      </div>
    </form>
  </div>
</div>
<script>
  layui.use(['form', 'layer'], function () {
    $ = layui.jquery;
    var form = layui.form
      , layer = layui.layer;

    // 复选框赋值
    let getBox = {};
    "{if count($data.house_number_id) > 0}"
    "{foreach $data.house_number_id as $vo }"
    index = 'number[' + "{$vo}" + ']';
    getBox[index] = true;
    "{/foreach}"
    "{elseif $id === 0}"
    "{foreach $number as $vo }"
    index = 'number[' + "{$vo.id}" + ']';
    getBox[index] = true;
    "{/foreach}"
    "{/if}"
    console.log(getBox);
    form.val('example', getBox);

    //监听提交
    form.on('submit(save)', function (data) {
      var data = data.field;
      var getData = {};
      getData['id'] = data.id;
      getData['type'] = data.type;
      getData['house_property_id'] = data.house_property_id;
      delete data.id;
      delete data.type;
      delete data.house_property_id;
      delete data.house_property_name;
      getData['house_number_id'] = Object.values(data).join(",");

      // 发异步，把数据提交给php
      main.ajaxPost(
        {
          url: "{:url('saveElectricity')}",
          data: getData,
        },
        function (data) {
          setTimeout(function () {
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //表格重载
            parent.layui.table.reload('electricityGrid');
            //关闭当前frame 
            parent.layer.close(index);
          }, 1000);
        }
      )
      return false;
    });

    // 房产房号 下拉联动
    form.on('select(select)', function (data) {
      var house_property_id = data.value;
      $.ajax({
        type: 'GET',
        url: "{:url('House.number/queryNumberId')}",
        data: { house_property_id: house_property_id },
        dataType: 'json',
        success: function (e) {
          //empty() 方法从被选元素移除所有内容
          $("#divCheck").empty();
          var html = "";
          $(e.data).each(function (v, k) {
            html += "<input type='checkbox' name='number[" + k.id + "]' value='" + k.id + "' title='" + k.name + "' checked> ";
          });
          //把遍历的数据放到select表里面
          $("#divCheck").append(html);
          form.render('checkbox');    //重新渲染
        }
      });

    });

  });
</script>